<template>
  <div class="backgroundColor1 container fixed">
    <Header content="邀请列表"></Header>
    <div class="backgroundColor">
      <scroller
        :pulldown-config="{content: '下拉刷新',downContent: '下拉刷新',upContent: '释放刷新'}"
        :pullup-config="{content: '上拉加载',downContent: '松开加载',upContent: '上拉加载'}"
        lock-x
        height="-46"
        ref="agentRecord"
        @on-pullup-loading="onScrollBottom()"
        :use-pullup="true"
        :use-pulldown="true"
        @on-pulldown-loading="onScrollTop()"
      >
        <div class="agentRecordWrap">
          <div v-for="item in recordList" v-if="recordList.length">
            <div class="flex">
              <div>
                <div class="font16" style="color:#014384">
                  {{item.nickname}}
                </div>
                <div class="font13" style="color: #C3C3C3;">
                  {{item.timeline | timestamp('YY-MM-DD HH:MM')}}
                </div>
              </div>
              <div class="font18" style="color: #027CEE;font-weight: 500">
                {{item.msg}}
              </div>
            </div>
          </div>
          <div v-if="recordList.length==0" style="border: none;text-align: center;padding-top: 200px;">
            暂无数据
          </div>
        </div>
      </scroller>
    </div>
  </div>
</template>
<script>
  import Header from './common/header.vue'
  import {Scroller} from 'vux'
  export default{
    data(){
      return {
        recordList:[],
        page:{
          page:1,
          pagesize:10,
          total:0
        },
        onFetching1:false,
        onFetching:false,
      }
    },
    methods:{
      onScrollTop(){
        if (this.onFetching1) {
        } else {
          this.onFetching1 = true;
          this.page.page = 1;
          this.recordList = [];
          this.profit('pullDown');
        }
      },
      onScrollBottom () {
        if (this.onFetching) {} else {
          this.onFetching = true;
          var that = this;
          that.page.page ++;
          this.profit('pullUp');
        }
      },
      profit(type){
        this.loading(true);
        this.service('invite',{
          currency_id:this.currency_id,
          startTime:'',
          endTime:'',
          recordType:0,
          page:this.page.page,
          pagesize:this.page.pagesize
        },'get').then((res)=>{
          this.loading(false);
          this.recordList =  this.recordList.concat(res.data);
          this.page.total = res.meta.pagination.total_pages;
          this.$nextTick(() => {
            if(this.page.total == 0 || (this.page.total == this.page.page)){
              this.$refs.agentRecord.disablePullup();
              this.$refs.agentRecord.reset({top:0});
            }else{
              if(type === 'pullDown'){
                this.$refs.agentRecord.reset({top:0});
              }
              this.$refs.agentRecord.donePulldown();
              this.$refs.agentRecord.enablePullup();
            }
          })
          this.onFetching = false;
          this.onFetching1 = false;
        });
      }
    },
    created(){
      this.currency_id = JSON.parse(sessionStorage.getItem('accountsList')).currency_id;
      this.onScrollTop();
    },
    components:{
      Header,
      Scroller
    }
  }
</script>
<style>
  .agentRecordWrap>div{
    padding:12px 15px 12px;
    border-bottom: 1px solid #F5F5F5;
  }
</style>
